<template>
  <div class="content">
    <e-heading grade='1'>学员测试成绩</e-heading>
    <div v-if="!loading">
      <div class="student_test divider">
        <e-cellbox :gutter="40">
          <e-cell-item style="width: 160px;">
            <div class="avatar_img">
              <e-avatar :src="studentDetailInfo.headPicture"/>
            </div>
          </e-cell-item>
          <e-cell-item>
            <el-row :gutter="20">
              <el-col :span="24">
                <span style="font-size: 35px; font-weight: 600">
                  {{studentDetailInfo.name}}
                </span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  学员性别：{{studentDetailInfo.sex === 1 ? '男' : studentDetailInfo.sex === 2 ? '女' : '待完善'}}
                </div>
                <div class="grid-content bg-purple">
                  学员年龄：{{studentDetailInfo.age ? studentDetailInfo.age : '待完善'}}
                </div>
                <div class="grid-content bg-purple">
                  监护人姓名：{{studentDetailInfo.parentName ? studentDetailInfo.parentName : '待完善'}}
                </div>
                <div class="grid-content bg-purple">
                  监护人手机：{{studentDetailInfo.parentMobile ? studentDetailInfo.parentMobile : '待完善'}}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  身高：{{studentDetailInfo.height ? studentDetailInfo.height + 'cm' : '待完善'}}
                </div>
                <div class="grid-content bg-purple">
                  体重：{{studentDetailInfo.weight ? studentDetailInfo.weight + 'kg' : '待完善'}}
                </div>
                <div class="grid-content bg-purple">   
                  站立摸高：{{studentDetailInfo.standingReach ? studentDetailInfo.standingReach + 'cm' : '待完善'}}
                </div>
                <div class="grid-content bg-purple">   
                  臂展：{{studentDetailInfo.armReach ? studentDetailInfo.armReach + 'cm' : '待完善'}}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  测试年龄组：{{studentDetailInfo.testAgeName ? studentDetailInfo.testAgeName : '待完善'}}
                  <span class="btn-edit" @click="handleShowAgeDialog">修改</span>
                  <el-dialog
                    class="age-dialog"
                    size="tiny"
                    :visible="ageDialogShow"
                    :before-close="handleDialogClose"
                    title="请选择测试年龄组">
                    <el-form :model="form" label-width="0px" ref="form" v-bind="getFormProps()">
                      <el-form-item
                        label-width="0px"
                        prop="ageValue"
                        :rules="[
                          { required: !0, message: '请选择测试年龄组'}
                        ]">
                        <el-select class="input-block" v-model="form.ageValue" value-key="id" placeholder="请选择测试年龄组">
                          <el-option v-for="item in ageList" :label="item.ageType" :value="item.id" :key="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                      <div class="btn-wrapper">
                        <el-button type="default" @click="handleDialogClose">取消</el-button>
                        <el-button type="primary" @click="handleSumitAge">确定</el-button>
                      </div>
                    </el-form>
                    </el-dialog>
                </div>
              </el-col>
            </el-row>
          </e-cell-item>
        </e-cellbox>
      </div>
      <div class="search_box">
        <el-form v-bind="getFormProps()" :inline="true" class="tr">
          <el-form-item label="日期：">
            <el-date-picker
              v-model="date"
              :clearable="false"
              type="date"
              size="small"
              placeholder="选择日期"
              @change="handleDate"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <router-view v-if="routerViewState" :testDate="testDate" ref="testView"></router-view>
    </div>
  </div>
</template>

<script>
import filters from 'src/filters'
import { pagingList, form } from 'utils/mixins'
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  mixins: [pagingList, form],
  computed: {
    ...mapGetters({
      loading: 'loading',
      studentDetailInfo: 'train_student_detail'
    }),
    date: {
      get (value) {
        value = this.testDate
        return value
      },
      set (value) {
        this.testDate = filters.FormatDate(value, 'yyyy-MM-dd')
      }
    },
    studentId () {
      return this.$route.query.studentId
    }
  },
  data () {
    return {
      testDate: filters.FormatDate(new Date().getTime(), 'yyyy-MM-dd'),
      ageList: [],
      form: {
        ageValue: ''
      },
      routerViewState: false,
      ageDialogShow: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created () {
    // 需要请求完成才能往下执行 所以此处不使用vuex获取
    trainApi.studentDetail({studentId: this.studentId}).then((res) => {
      this.$store.commit('TRAIN_STUDENT_DETAIL', res.data)
      this.routerViewState = true
    })
  },
  methods: {
    handleDate (value) {
      if (this.$refs.testView) {
        this.$refs.testView.initData(value)
      }
    },
    handleShowAgeDialog () {
      trainApi.getStudentTestAge().then(({data}) => {
        this.ageList = data || []
        this.ageDialogShow = true
        this.form.ageValue = this.studentDetailInfo.testAgeId
      })
    },
    handleSumitAge () {
      this.validate(() => {
        let subData = {}
        subData.studentId = this.studentDetailInfo.id
        subData.testAgeId = this.form.ageValue
        trainApi.setStudentTestAge(subData).then(({data}) => {
          // 如果是首页 不会跳转，如果是编辑页需要会自动跳转
          this.$router.push({
            path: '/training/student/test',
            query: {
              studentId: this.studentId
            }
          })
          this.$store.dispatch('train_student_detail', {studentId: this.studentId})
          this.$refs.testView.initData('', subData.testAgeId) // 刷新数据
          this.handleDialogClose()
        })
      })
    },
    handleDialogClose () {
      this.ageDialogShow = false
    }
  }
}
</script>

<style lang="scss">
.content {
  .student_test {
    margin-top: 55px;
    .avatar_img {
      .x-img {
        width: 120px;
        height: 120px;
        border: 1px solid #fff;
        border-radius: 50%;
      }
    }
    .grid-content {
      margin-bottom: 15px;
      .btn-edit{
        padding-left: 8px;
        width: 40px;
        min-width: auto;
        color: #24c881;
        cursor: pointer;
      }
      .age-dialog{
        .el-dialog{
          width: 400px;
          .el-dialog__body{
            text-align: center;
            .el-select{
              margin-top: 10px;
            }
            .btn-wrapper{
              margin-top: 40px;
            }
          }
        }
      }
    }
  }
  .search_box {
    margin-top: 40px;
  }
}
.standard_title {
  .el-popover__title {
    color: #333;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
  }
  .el-table {
    border: 1px solid #f2f2f2;
  }
  .el-table th, .el-table td {
    height: 30px;
  }
  .explain_rules {
    color: #999;
    padding: 5px;
  }
}
.option_value {
  float: right;
  color: #8492a6;
  font-size: 13px;
  &::after{
    content: ' >';
  }
}
</style>
